<template>
  <jb-crud-page ref="pageRef" searchUrl="/aiApp/list" :conditions-align="'start'" :searchConditions="pageConditions"
                :editComponent="AppEdit">
    <template #conditions-form>
      <jb-input v-model:value="pageConditions.keywords" placeholder="请输入关键词搜索" style="width: 200px"></jb-input>
      <n-select clearable placeholder="是否启用" style="width: 160px" v-model:value="pageConditions.enable"
                :options="[{ label: '启用', value: true}, { label: '禁用', value: false}]"></n-select>
    </template>
    <template #opt>
      <jb-btn type="primary" secondary @click="pageRef.showEditModal('添加AI应用')">添加AI应用</jb-btn>
    </template>

    <template #default="{list,tableStartIndex}">
      <jb-super-table :data="list"
                      :start-index="tableStartIndex"
      >
        <jb-super-column type="seq" title="序号" width="60" fixed="left"></jb-super-column>
        <jb-super-column
            field="sn"
            title="编码"
            min-width="100"
        ></jb-super-column>
        <jb-super-column
            field="name"
            title="名称"
            min-width="160"
            fixed="left"
        ></jb-super-column>
        <jb-super-column
            field="briefInfo"
            title="定制优化"
            width="100"
        >
          <template #default="{row}">

            <jb-btn
                icon="mdi:settings-stop-outline"
                type="error" ghost
                    drawerTitle=""
                    :drawerComponent="AppTools"
                    :drawerComponentProps="{appId: row.id,sessionId:row.sessionId}"
                    drawerNegativeText=""
                    drawerPositiveText=""
                    :drawerArgs="{defaultWidth: '1360px',minWidth:'1360'}"
                    @drawerYesClick="handleDrawerYesClick"></jb-btn>
          </template>
        </jb-super-column>
        <jb-super-column
            field="function"
            title="挂载Function"
            width="120"
        >
          <template #default="{row}">

            <jb-btn
                drawerTitle="维护应用绑定AI_Functions"
                icon="mdi:settings-stop-outline"
                :disabled="row.enable" type="primary" ghost :drawerComponent="ParamManagement"
                    :drawerComponentProps="{appId: row.id}"
                    :drawerArgs="{width: '1400px'}"
                    @drawerYesClick="handleDrawerYesClick">{{row.functionCount || 0}}
            </jb-btn>
          </template>
        </jb-super-column>
        <jb-super-column
            field="apiKey"
            title="挂载知识库"
            width="120"
        >
          <template #default="{row}">
            <jb-btn
                drawerTitle="维护应用绑定知识库"
                icon="mdi:settings-stop-outline"
                :disabled="row.enable" type="primary" ghost :drawerComponent="KnowledgeManagement"
                    :drawerComponentProps="{appId: row.id}" :drawerArgs="{width: '1200px'}" @drawerYesClick="handleDrawerYesClick">  {{row.knowledgeBaseCount || 0}}</jb-btn>
          </template>
        </jb-super-column>
        <jb-super-column
            field="enable"
            title="发布状态"
            width="100"
        >
          <template #default="{ row }">
            <jb-switch v-model:value="row.enable" :url="`/aiApp/toggleEnable/${row.id}`"
                       @update:value="pageRef.loadData()"></jb-switch>
          </template>
        </jb-super-column>

        <jb-super-column title="操作" width="140" fixed="right">
          <template #default="{ row }">
            <jb-btn class="mx-8px" tip-text="编辑" secondary circle type="warning" :icon="Icons.EDIT"
                    @click="pageRef.showEditModal('编辑AI应用',{id:row.id})"
            ></jb-btn>
            <jb-btn class="mx-8px" tip-text="删除应用" secondary circle type="error" :icon="Icons.DELETE"
                    :confirmText="'确认删除该应用？'" :url="`/aiApp/del/${row.id}`" @success="pageRef.loadData()"
            ></jb-btn>
          </template>
        </jb-super-column>
      </jb-super-table>
    </template>
  </jb-crud-page>
</template>

<script setup>
import {ref} from 'vue'
import AppEdit from './cpns/app-edit.vue'
import ParamManagement from './cpns/param-management/index.vue'
import KnowledgeManagement from './cpns/knowledge-management/index.vue'
import AppTools from './cpns/app-tools/index.vue'
import {useResetableData} from '@/hooks/common/use-resetable-data'
import {Icons} from '@/constants'

const pageRef = ref(null)
const pageConditions = useResetableData({
  keywords: '',
  enable: null
})

function handleModalYesClick({componentRef, close}) {
  componentRef.submit(() => {
    close()
    pageRef.value.loadData()
  })
}

function handleDrawerYesClick({componentRef, close}) {
  componentRef.submit(() => {
    close()
    pageRef.value.loadData()
  })
}

</script>

<style scoped>
.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fixed-header {
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.table-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

.fixed-footer {
  padding: 16px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.ml-2 {
  margin-left: 8px;
}
</style>
